<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:include="_header_include::frag(~{::title},~{},~{})">
    <title>表单</title>
</head>
<body>
<div id="form">
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" >
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  
  <el-form-item label="活动区域" prop="region">
    <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="活动时间" required>
    <el-col :span="11">
      <el-form-item prop="date1">
       <!-- value-format="yyyy-MM-dd"  -->
        <el-date-picker type="datetime"  :picker-options="pickerOptions1" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;" ></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
  <!--   <el-col :span="11">
      <el-form-item prop="date2">
        <el-time-picker type="fixed-time" placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;" ></el-time-picker>
      </el-form-item>
    </el-col> -->
  </el-form-item>
  <el-form-item label="即时配送" prop="delivery">
    <el-switch v-model="ruleForm.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="活动性质" prop="type">
    <el-checkbox-group v-model="ruleForm.type">
      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
      <el-checkbox label="地推活动" name="type"></el-checkbox>
      <el-checkbox label="线下主题活动" name="type"></el-checkbox>
      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="特殊资源" prop="resource">
    <el-radio-group v-model="ruleForm.resource">
      <el-radio label="线上品牌商赞助"></el-radio>
      <el-radio label="线下场地免费"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="活动形式" prop="desc">
    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
</div>

 <div th:include="_footer_include :: #jsLib"></div>

<script>

 var vm = new Vue({
     el:'#form',
     data:{
    	 ruleForm: {
             name: '',
             region: '',
             date1: null,
             date2: '',
             delivery: false,
             type: [],
             resource: '',
             desc: ''
         },
         rules: {
             name: [
               { required: true, message: '请输入活动名称', trigger: 'blur' },
               { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
             ],
             region: [
               { required: true, message: '请选择活动区域', trigger: 'change' }
             ],
             date1: [
            	// 
               { type: 'date',required: true, message: '请选择日期', trigger: 'change' },
               { validator:function(rule,value,callback){
                 
             /*   if(/^1[34578]\d{9}$/.test(value) == false){
                   callback(new Error("请输入正确的手机号"));
               }else{
                   callback();
               } */
                  
            	   
            	   
                  alert("这是自定义校验");
                  
                  callback();
                  
               }, trigger: 'blur'}
             ],
             date2: [
               { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
             ],
             type: [
               { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
             ],
             resource: [
               { required: true, message: '请选择活动资源', trigger: 'change' }
             ],
             desc: [
               { required: true, message: '请填写活动形式', trigger: 'blur' }
             ]
           },
           pickerOptions1: {
               shortcuts: [{
                 text: '今天',
                 onClick(picker) {
                   picker.$emit('pick', new Date());
                 }
               }, {
                 text: '昨天',
                 onClick(picker) {
                   const date = new Date();
                   date.setTime(date.getTime() - 3600 * 1000 * 24);
                   picker.$emit('pick', date);
                 }
               }, {
                 text: '一周前',
                 onClick(picker) {
                   const date = new Date();
                   date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                   picker.$emit('pick', date);
                 }
               }]
           } 
     },
     methods:{
    	 submitForm(formName) {
   	        this.$refs[formName].validate((valid) => {
   	          if (valid) {
	             var formData = vm.ruleForm;
	             var param={};
	             param.name= formData.name;
	             param.region = formData.region;
	             param.date1 = formData.date1;
	             param.date2 = formData.date2;
	             param.delivery  =formData.delivery;
	             param.resource=formData.resource;
	             param.desc = formData.desc;
	             param.type=formData.type;
	             console.info(param);
	             
	            axios.post('/demo/submitForm', param)
	            .then(function (response) {
	            	console.info(response);
	                vm.$message('提交成功');
	            })
	            .catch(function (error) {
	                 console.log(error);
	            });
	             
   	          } else {
   	        	console.log('数据未通过校验！');
   	            return false;
   	          }
   	        });
   	      },
   	      resetForm(formName) {
   	        this.$refs[formName].resetFields();
   	      },
   	      getFormData:function(){
   	    	axios.get("/demo/getFormData?id=1")
	            .then(function (response) {
	            	if(!response.data){
	            		return;
	            	}
	              vm.ruleForm=response.data;
	              var data =   response.data;
	              //日期类型需要做一步处理
	              vm.ruleForm.date1=new Date(data.date1);
	              
	              vm.ruleForm = data;
	           
	            })
	            .catch(function (error) {
	              console.log(error);
	            })
	            .then(function () {
	               console.info("getTableNum finish");
	            });
   	      }
        
     },
     created(){
         console.info("create method");
         this.getFormData();
         
     },
     mounted(){
        console.info("mounted method");
     }
     
 });
 
</script>
</body>
</html>